<template>
  <el-form :model="$props" :rules="rules" :inline="true" ref="editForm">
    <el-form-item prop="name" label="类别名称">
      <el-input :value="name" @input="$emit('update:name', $event)"></el-input>
    </el-form-item>
    <el-form-item label="父级类别" prop="parent">
      <el-cascader
        :options="twoLevelCategory"
        :value="parent"
        @input="$emit('update:parent', $event)"
        :props="{
          expandTrigger: 'hover',
          label: 'name',
          value: 'id',
          emitPath: false,
          checkStrictly: true,
        }"
      ></el-cascader>
    </el-form-item>
    <el-form-item label="显示顺序">
      <el-input-number
        :min="-999"
        :max="999"
        :value="sort_order"
        @input="$emit('update:sort_order', $event)"
      ></el-input-number>
    </el-form-item>
    <el-row>
      <el-form-item label="外链图片">
        <el-input
          :value="banner_image_alt"
          @input="$emit('update:banner_image_alt', $event)"
        ></el-input>
      </el-form-item>
      <el-upload
        action="#"
        list-type="picture-card"
        :file-list="banner_image_alt ? [{ url: banner_image_alt }] : []"
        :http-request="uploadImage"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-row>
    <el-row>
      <el-button type="success" @click="onSubmit">确定</el-button>
      <el-button type="danger">取消</el-button>
      <el-button>清空</el-button>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "CategoryEdit",
  props: {
    id: {
      type: [Number, undefined],
      default: undefined,
    },
    name: String,
    sort_order: Number,
    parent: {
      type: [Number, undefined],
      default: undefined,
    },
    banner_image_alt: {
      type: String,
      default: undefined,
    },
    image: {
      type: Number,
    },
  },
  computed: {
    ...mapGetters(["treeCategory", "twoLevelCategory"]),
  },
  data() {
    const validateParent = (rule, value, callback) => {
      if (this.id && this.id === this.parent) {
        callback(new Error("商品类别的父级类别不能是自身"));
      }
      callback();
    };

    return {
      rules: {
        name: [
          { required: true, message: "类别名称为必填项！", trigger: "blur" },
        ],
        parent: [
          {
            validator: validateParent,
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    async onSubmit() {
      try {
        await this.$refs.editForm.validate();
        this.$emit("submit", this.$props);
      } catch (e) {
        console.log(e);
      }
    },
    async uploadImage({ file }) {
      const fd = new FormData();
      fd.append("image", file);
      const data = await this.$api.uploadImage(fd);
      console.log(data);
      const { id: imageId, image: url } = data;
      this.$emit("update:image", imageId);
      this.$emit("update:banner_image_alt", url);
    },
  },
  watch: {
    id() {
      this.$refs.editForm.clearValidate();
    },
  },
};
</script>

<style scoped>
.el-upload-list__item {
  transition: none !important;
}
</style>
